<template>
    <div id="viewport" :class="{'viewport-sec': !full, 'viewport-full': full}" v-drag v-resizable="'viewport'">
        <div class="h-full w-full relative tranform" :class="{'scale-99': !full}">
            <div id="header" :class="{'rounded-t-md': !full, 'light-mode': !darkMode, 'dark-mode': darkMode}" @mousedown="handleMousedown">
                <img class="inline-block h-4 pl-1 pr-2" :src="icon" alt="">
                <span class="text-xs">{{props.title}}</span>
                <div class="flex h-7 absolute top-0 right-0">
                    <button class="px-3.5 hover:bg-black hover:bg-opacity-20 duration-200 cursor-auto" :class="{'filter invert': darkMode}" @click="emit('muti')">
                        <img class="transform active:scale-75 duration-150" width="8" :src="`/src/assets/ui/muti.png`">
                    </button>
                    <button v-show="!full && disable" class="px-3.5 hover:bg-black hover:bg-opacity-20 duration-200 cursor-auto" :class="{'filter invert': darkMode}" @click="fullScreen">
                        <img width="8" :src="`/src/assets/ui/full-screen.png`">
                    </button>
                    <button v-show="full && disable" class="px-3.5 hover:bg-black hover:bg-opacity-20 duration-200 cursor-auto" :class="{'filter invert': darkMode}" @click="fullScreen">
                        <img width="8" :src="`/src/assets/ui/exit-full-screen.png`">
                    </button>
                    <button class="px-3.5 hover:bg-red-500 duration-200 cursor-auto"  @click="emit('cancel')">
                        <img width="8" :src="`/src/assets/ui/cancel.png`" :class="{'filter invert': darkMode}">
                    </button>
                </div>
            </div>
            <div class="h-content w-full absolute">
                <slot></slot> 
            </div>
            <div v-show="!full && disable" id="left-resize" class="absolute left-0 top-0 -z-10 h-full "></div>
            <div v-show="!full && disable" id="top-resize" class="absolute left-0 top-0 -z-10 w-full "></div>
            <div v-show="!full && disable" id="right-resize" class="absolute left-full top-0 -z-10 h-full "></div>
            <div v-show="!full && disable" id="bottom-resize" class="absolute left-0 top-full -z-10 w-full "></div>
        </div>
    </div>
</template>

<script setup>
    import { computed, reactive, ref, toRefs } from '@vue/reactivity';
    import { useStore } from 'vuex';
    import {store} from '../store';

    import vDrag from './directive/drag';
    import vResizable from './directive/resizable';

    const state = reactive({
        full: true && props.disable,
    })

    const darkMode = computed(() => store.state.darkMode)

    const props = defineProps({
        title: {
            type: String,
            default: 'Untitled',
        },
        icon: {
            type: String,
            default: 'discord'
        },
        disable: {
            type: Boolean,
            default: true
        }
    })

    const fullScreen = (e) => {
        state.full = !state.full
        const viewport = e.target.parentNode.parentNode.parentNode.parentNode
        viewport.style.transform = 'translate(0px, 0px)'
    }

    const handleMousedown = e => {
        emit('mousedown')
        e.stopPropagation()
    }

    const { full } = toRefs(state)

    const emit = defineEmits(['muti', 'cancel', 'mousedown'])

</script>

<style lang="scss" scoped>

.viewport-sec {
    @apply transition-size duration-75 top-16 left-52 w-2/5 h-4/5 absolute rounded-md;
}
.viewport-full {
    @apply transition-size duration-75 w-full absolute top-0 left-0 rounded-none;
    height: calc(100% - 40px);
}


#left-resize {
    transform: translateX(-0.2rem);
    width: 0.2rem;
}
#top-resize {
    transform: translateY(-0.2rem);
    height: 0.2rem;
}
#right-resize {
    width: 0.2rem;
}
#bottom-resize {
    height: 0.2rem;
}

.light-mode {
    @apply h-7 relative w-full leading-6 bg-gray-50
}

.dark-mode {
    @apply h-7 relative w-full leading-6 bg-gray-900 text-white
}


</style>